<template>
  <div>
    <div>
      <el-form
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="100px"
        :model="ruleForm"
        style="width: 80%; margin-left: 10%; padding-top: 20px"
      >
        <el-form-item label="家庭组名称">
          <el-input
            v-model="ruleForm.group_name"
            placeholder="请输入家庭组名称"
            style="width: 30%"
          />
        </el-form-item>

        <el-form-item label="来源">
          <el-select
            v-model="CusSourceValue"
            placeholder="请选择来源"
            @change="CusSourceChange"
          >
            <el-option
              v-for="item in getCusSourceOptions"
              :key="item.id"
              :label="item.source_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <div>
          <el-form-item>
            <p>
              <el-button type="primary" @click="addresss(addressForm)">
                添加地址
              </el-button>
            </p>
          </el-form-item>
        </div>
        <el-form-item v-for="(item, index) in addressArr" :key="index">
          <el-input
            v-model="item.addressee"
            placeholder="请输入收货姓名 "
            style="width: 200px"
          />
          <el-input
            v-model="item.mobile"
            placeholder="请输入收货手机号 "
            style="width: 200px"
          />
          <el-cascader
            v-model="baddress"
            :props="props"
            @change="cascaderChange"
            @click.native="aaa(index)"
          />
          <el-input
            v-model="item.address"
            placeholder="请输入详细地址"
            style="width: 200px"
          />
          &nbsp;
          <el-button type="danger" @click.prevent="deleteaddress(index)">
            删除
          </el-button>
        </el-form-item>

        <div>
          <el-form-item>
            <el-button type="primary" @click="addTest">添加家长+</el-button>
          </el-form-item>
          <el-form-item v-for="(item, index) in items" :key="index">
            <!-- <p>添加家长</p> -->

            <el-input
              v-model="item.cus_name"
              placeholder="请输入家长姓名 "
              style="width: 150px"
            />

            <el-input
              v-model="item.tel"
              placeholder="请输入家长手机号 "
              style="width: 200px"
            />

            &nbsp;&nbsp;
            <el-button type="danger" @click.prevent="deleteTest(index)">
              删除
            </el-button>
            <el-button type="primary" @click="addTest">添加家长+</el-button>
          </el-form-item>
        </div>

        <div>
          <el-form-item>
            <el-button type="primary" @click="addUser">添加孩子+</el-button>
          </el-form-item>
          <el-form-item v-for="(item, index) in itemsUser" :key="index">
            <!-- <p>添加孩子</p> -->

            <el-input
              v-model="item.nick_name"
              placeholder="请输入孩子姓名 "
              style="width: 150px"
            />
            <el-select v-model="item.gender" placeholder="请选择性别">
              <el-option
                v-for="iteme in genderOptions"
                :key="iteme.id"
                :label="iteme.name"
                :value="iteme.id"
              />
            </el-select>
            <el-date-picker
              v-model="item.birthday"
              format="yyyy-MM-dd"
              placeholder="选择出生日期"
              type="date"
              value-format="yyyy-MM-dd"
            />

            &nbsp;&nbsp;
            <el-button type="danger" @click.prevent="deleteUser(index)">
              删除
            </el-button>
            <!-- <el-button type="primary" @click="addUser">添加孩子+</el-button> -->
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div style="width: 80%; margin-left: 40%">
      <el-button @click="goBack()">返回</el-button>
      <el-button style="margin-left: 10px" type="primary" @click="sbumit">
        提交
      </el-button>
    </div>
  </div>
</template>

<script>
  import { getArea, cusGroupAdd } from '@/api/level'
  import { getCusSourceList } from '@/api/gustomerGroup'

  export default {
    // props: {
    //   id: {
    //     type: Number,
    //     required: true,
    //   },
    // },
    data() {
      return {
        addressArrIndex: '',
        CusSourceValue: '',
        addressArr: [
          {
            addressee: '',
            mobile: '',
            address: '',
            region_id: '',
            city_id: '',
            province_id: '',
          },
        ],
        baddress: '',
        items: [
          {
            cus_name: '',
            tel: '',
          },
        ],
        itemsUser: [
          {
            birthday: '',
            nick_name: '',
            gender: '',
          },
        ],
        itemAddress: [{ addressValue: '', arr: [] }],
        addressForm: {
          addressee: '',
          mobile: '',
          province_id: '',
          city_id: '',
          region_id: '',
          address: '',
        },
        ruleForm: {
          group_name: '',
        },
        genderOptions: [
          {
            id: 'male',
            name: '男',
          },
          {
            id: 'female',
            name: '女',
          },
          {
            id: 'secrecy',
            name: '保密',
          },
        ],
        pid: '0',
        addressValue: {},
        getCusSourceOptions: [],
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const params = {
              pid: 0,
            }
            params.pid = node.value
            getArea(params).then((res) => {
              const arr = []
              res.data.forEach((e) => {
                arr.push({
                  value: e.id,
                  label: e.name,
                  leaf: e.level >= 3,
                })
              })
              resolve(arr)
            })
          },
        },
      }
    },
    watch: {},

    mounted() {
      this.init()
    },
    methods: {
      // 初始化 方法
      init() {
        getCusSourceList().then((e) => {
          this.getCusSourceOptions = e.data
        })
      },
      sbumit() {
        const group_address_data = JSON.stringify(this.addressArr)
        const user = JSON.stringify(this.items)
        const child = JSON.stringify(this.itemsUser)
        this.ruleForm.group_address_data = group_address_data
        this.ruleForm.child = child
        this.ruleForm.user = user
        this.ruleForm.is_privacy = 'Y'

        for (let e of this.addressArr) {
          for (var keys in e) {
            if (e[keys] == '' || e[keys] == null) {
              this.$message.error('请输入地址信息')
              return
            }
          }
        }
        for (let e of this.items) {
          for (var i in e) {
            if (e[i] == '' || e[i] == null) {
              this.$message.error('请输入家长信息')
              return
            }
          }
        }
        for (let e of this.itemsUser) {
          for (var k in e) {
            if (e[k] == '' || e[k] == null) {
              this.$message.error('请输入孩子信息')
              return
            }
          }
        }
        if (this.ruleForm.source != '' && this.ruleForm.group_name != '') {
          cusGroupAdd(this.ruleForm)
            .then(() => {
              this.$message({
                message: '成功',
                type: 'success',
              })
              this.goBack()
            })
            .catch(() => {
              this.$message.error('失败')
            })
        } else {
          this.$message.error('填写家庭组名称或来源')
        }
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
      preservation() {},
      // address(e) {
      //   this.addressForm = {
      //     addressee: '',
      //     mobile: '',
      //     province_id: '',
      //     city_id: '',
      //     region_id: '',
      //     address: '',
      //   }
      //   this.baddress = ''
      //   this.addressArr.push({
      //     addressee: e.addressee,
      //     mobile: e.mobile,
      //     address: e.address,
      //     region_id: e.region_id,
      //     city_id: e.city_id,
      //     province_id: e.province_id,
      //   })
      // },
      addresss() {
        this.addressArr.push({
          addressee: '',
          mobile: '',
          address: '',
          region_id: '',
          city_id: '',
          province_id: '',
        })
      },
      addTest() {
        this.items.push({
          cus_name: '',
          tel: '',
        })
      },
      addUser() {
        this.itemsUser.push({
          birthday: '',
          nick_name: '',
          gender: '',
        })
      },
      deleteaddress(index) {
        this.addressArr.splice(index, 1)
      },
      deleteTest(index) {
        this.items.splice(index, 1)
      },
      deleteUser(index) {
        this.itemsUser.splice(index, 1)
      },
      CusSourceChange(e) {
        this.ruleForm.source = e
      },

      cascaderChange(e) {
        const province_code = e[0]
        const city_code = e[1]
        const area_code = e[2]
        this.addressArr[this.addressArrIndex].province_id = province_code
        this.addressArr[this.addressArrIndex].city_id = city_code
        this.addressArr[this.addressArrIndex].region_id = area_code
      },
      aaa(i) {
        this.addressArrIndex = i
      },
    },
  }
</script>

<style></style>
